<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<head>
    <title></title>
    <!--ExtJs框架开始-->
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/extjs/Ext-Base.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/js/extjs/ext-all.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/css/extcss/ext-all.css" />
    <!--ExtJs框架结束-->
    <!--ExtJs框架结束-->
<script type="text/javascript">
     Ext.onReady(function () {
 //创建panel
 var panel = new Ext.Panel({
     title: 'Ajax与数据显示',
     width: 200,
     height: 200,
     frame: true
 });
 //创建数据显示模板
 var template = new Ext.XTemplate(
             '<table  id="template">',
                '<tr><td>编号:</td><td>{id}</td></tr>',
                '<tr><td>姓名:</td><td>{name}</td></tr>',
                '<tr><td>生日:</td><td>{brithday}</td></tr>',
                '<tr><td>身高:</td><td>{height}</td></tr>',
                '<tr><td>性别:</td><td>{sex}</td></tr>',
                '<tr><td valign="top">描述:</td><td>{discribe}</td></tr>',
             '</table>'
         );
         
 //获取数据
 Ext.Ajax.request({
     url: '<%=request.getContextPath()%>/login.do?method=extjs',
     method: 'post',
     params: { id: 1 },
     success: function (response, options) {
         for (i in options) {
             alert('options参数名称:' + i);
            // alert('options参数[' + i + ']的值：' + options[i]);
         }
         
          Ext.Msg.alert('',response);
         var responseJson = Ext.decode(response.responseText);
         Ext.Msg.alert('',responseJson);
         template.compile();
         
         template.overwrite(panel.body, responseJson);
          Ext.Msg.alert('',template);
     },
     failure: function () {
         alert('系统出错，请联系管理人员！');
     }
 });
 //创建窗体
 var win = new Ext.Window({
     title: '窗口',
     id: 'window',
     width: 476,
     height: 374,
     resizable: true,
     modal: true,
     closable: true,
     maximizable: true,
     minimizable: true,
     items: [panel]
 });
 win.show();
 });
</script>
</head>
</head>
<body>

</body>
</html>